My Reaction
After learning JavaScript I was next introduced to React. React is an open source JavaScript library for building user interfaces and is maintained by Facebook. Most think of React as a front end framework. It provides an effective way to organize code . There are a couple differences from React and vanilla JavaScript(regular JavaScript). We use syntax that is very similar to HTML and a version of JavaScript called JSX.
You should know the fundamentals of JavaScript before starting a React app.To get started with making a React program you need to have Node.js and Node Package Manager(NPM) installed. You can create the app by running create-react-app in the terminal followed by the name of the app. React is pro declarative programming, meaning instead of coding what the program should do each step of the way, you program what the program should accomplish and how the program should view in each state.
Some of the new concepts I’m learning in React are things like components and props and state, .Components create a module for your different functionalities and gives it a structure that when rendered to the page creates orderly compartments for the data that lives in the component and the properties. We declare a component by creating a function and the return of the function being JSX.
The return is where we tell React what we want rendered to the page. In the function above the return is where we can set certain properties to the component. In the return we call other components. This creates a tree of components.The App.js component is usually the top level component. App.js will be the parent of a few children components and those components will have children components.You import and export the components to use different variables and properties in various components across the program.
Before React 16.8 you could only keep tract of a components lifecycle and state by using class components this changed when hooks was implemented. Sometimes you come across documentation that uses class components, function components are almost used the same way so sometimes you should double check if your methods are corresponding with the component style.You can also use arrow function syntax.
You can pass props, or properties through the components by passing it down through the component tree. Props can also be data that is rendered from a fetch which is very helpful when it comes to keeping everything organized.State is the position of the page and props in that moment. Even though it can be hard to grasp at first once you get it is very rewarding.
It is intense learning a new programing language. One of the things I used to help me is a React crash course on youtube. The programmer demoed a task list and it really helped me understand what was actually going on inside each component. The programmer also went over methods like ternary operators, mapping over data and filtering data. After my lectures I would watch this brief description of the same concepts I just learned and it would help me connect the dots.
My reaction to React was that it is really an Amazing tool once you learn enough about it. React makes your code more efficient in relation to how everything is rendered to the DOM.Once you get the hang of implementing the framework you can use Youtube and the React documentation to create web application from scratch.I recently just set up my first React application by just watching a youtube video and copying commands. The React website has a tutorial that helps you interpret all of the given starter code and learn more about setting state in components.There are development tools for Google Chrome and FireFox that you can use to see what different properties each component holds and what that property is. It also helps to draw your component tree out. There are also a couple of VS code extensions that will provide stater code for creating components.. I just try to keep all over the concepts organized on when to implement them.
There is a-lot of territory to cover when it comes to react but as long as you have a solid understand of JavaScript than it will not be too hard to tackle. The best advice I can give is to try not to overreact (lol).
