React This

logo-reactjs

Step 1: Read

When you are a developer, we all must learn something new. I have been recently spending time with learning ReactJS. It is supposed to be a new way to build and develop UI based websites a lot faster. Instead of writing a ton of JavaScript code files, you use this new way of building JavaScript by building it by blocks of code, a very modular way of doing things.

So far it has been an interesting experience in getting it all set up and running. Which was a task in and of itself with learning how to use NPM properly, and Git for React based websites and essentially learning a different way to do JavaScript. The best way I can describe my time with ReactJS is say you are use to driving a car one way but then you go to another country and the street signs are different and you drive on the other side of the road. It takes some getting use to and also taking some time wrapping your brain around it all.

 

Step 2. Study and Practice

To clarify what I have been using to gain some knowledge in the matter besides the tutorial files found on the React Website, I have been using Code Academy, Microsoft Virtual Academy and the Facebook tutorials that they have out on the web.

So far I have a very trial and error approach to what I am building. I have built my first react website and added in SASS into it to allow for easier styling and adding in responsive development. I have added in flex, and SASS easily.

screen-shot-2016-11-19-at-9-34-05-am

A few of the trial and error things that have come from learning react is I haven’t really used NPM a whole lot or the command line outside of what I use for SASS development. I have learned to love the terminal and have found that Visual Studio Code has become my best friend in the React world. I didn’t know that Visual Studio Code saves the command line commands for whatever project you are using. Also having the actions pane allow for NPM commands and Git commands has made this experience a lot easier.

screen-shot-2016-11-19-at-9-40-00-am

 

My approach to building this react website is the exact same way I have approached WordPress. I focus on one thing first, I don’t focus on the whole thing, the whole thing is the end of the project. But you solve one issue, then the next issue and the next issue. Such as for example, my first step was to get the thing showing up. Then I made sure I was programming it correctly. Then I added in correct styling and made it responsive and mobile.

The next goal I have for the project is moving all the static text to be data and getting it to switch on depending on which button is clicked. THEN my next goal is to add the URL router depending on which button is clicked and showing the different data. I am not even focusing on other parts of my react website until I get one part done first. One step at a time, if you try to jump onto everything at once it will not work out for the best.

Step 3 Don’t murder your computer

Now I always tell developers this, learning a new framework or coding language or anything new is usually code and explode and defuse. What that means is 60% of it is breaking it, 30% of it is trying to fix it and 10% is usually involving pain and anger and frustration. I will probably post a link once I find my website to be somewhere that is viewable and actually has functionality.

giphy-2

In closing…

I can see why React.JS is becoming a big thing that is quickly taking over the web. It’s a different way of learning things, so I have to rewire my brain in learning it since I am so use to WordPress, I have to think completely different. I will be sure to document more of my journey with React if you all would like to read more about it. If I get to a point where I am “knowledgeable” then I will post any tips or tricks I have learned along the way from people who are good at this. I also have to reference the movie Doctor Strange, the scene where he asks “How do I get from here to there.” and she said “how did you become a doctor?” He replies with “Study and Practice.” that is what you will have to do with code even if you are an ace in one, you will be a novice in another. All it takes is time and patience. Well until next time.

See you space cowboy…

Twitter