I have been using React for over a year now. So now decide to write a post about all experience I gathered in the fields of React. The essential guide is for beginners only there I covered the basic concepts as fundamentals for working with React. It is not a complete guide to React but rather a complete introduction.
What is React
How Does React Work
Your First React App
To getting started with react app you have to install Node on your computer. And run create-react-app, run the following code in your terminal, one directory up from where you want the project to live.
$ npx create-react-app my-app
Once that finishes installing, move to the newly created directory and start the project.
$ cd my-app && npm start
Once you run this command a new window will popup at localhost:3000 with your new React app.
If you look into the project structure, you will see a public directory and src directory along with the node_modules.
In the public directory, index.html is the important file, which is very similar to the static index. HTML file And the src directory will contain all React code.
To getting started with React find the App.js file in the src directory.
React is all about Components. Essentially, React is a component-based library. Actually Reacts makes easy frontend development. In React, we create small components and put them together. All components are reusable. You can create small components or big components. Components are mostly simple functions in any programming language. Functions take some input and return some output. We can use functions as needed by calling them. So we can use components as needed by import them.
Benefits of Components
Components make your code more readable and easier to work with. In big projects, There are lots of code, that’s can be messy, but if you use react, so you can handle it very easily because of components. Components divide a big project into a lot of small parts and put them together. So when you need to change something in your project you don’t need to touch the whole bunch of code, you just can change the code in small components that hold the part of the project.
There are some useful hooks in React like useEffect, UseState, UseCallback, etc. You can use them easily for web development. I love using hooks rather than creating functions. Reacts hooks are very powerful. Hooks are a special function in React. All hooks functions begin with the word use.
Basically, with props, you can pass data to child components from parent’s components. Sometimes You have to use some data repeating, but using props you can use one component for so many data dynamically instead of hardcoded. Props make react powerfully because it can handle lots of data very easily.
Okay, the state is an amazing thing in React. When you need to change data like remove, delete, update you can put the data in React state. Also, You can pass the data from one state to another component. You can use the same state on other components. So, it’s a very powerful thing in React.
Pulling in API Data
In React, You can easily handle API data using useEffect hooks with fetch. You can get data from the API, Also you can post Data to the API through the backend. It’s very easy to work with API data with React. React makes it very simple. You can handle lots of data without facing any major issues.
Building and Deploying a React App
After creating your first react app you have to put it on the server. If host all the files it won’t work. You have to build the project by creating a build folder that will contain your app. put the contents of that folder anywhere, and you’re done. To create a build folder you have to run the following command.
$ npm run build