Node.js Download<\/a><\/li>\n<\/ul>\nOnce the installation is complete, you can check if the installation was successful by entering the following commands in the terminal:<\/p>\n
node -v<\/code><\/pre>\nnpm -v<\/code><\/pre>\n2.3 Creating a React Project with Create React App<\/h3>\n
After installing VS Code, Node.js, and npm, you can create a new React application. By using Create React App, it sets up a basic React project with all configurations automatically done. Run the following command to create the project:<\/p>\n
npx create-react-app my-app<\/code><\/pre>\nHere, my-app<\/code> is the name of the project you are creating. You can change it to whatever name you prefer. Once the command is complete, navigate to that directory:<\/p>\ncd my-app<\/code><\/pre>\n3. Opening the Project in VS Code<\/h2>\n
After launching VS Code, select File > Open Folder<\/strong> from the top menu and choose the created my-app<\/code> folder. You can now check the project structure.<\/p>\n4. Understanding the Project Structure<\/h2>\n
The basic project structure generated using Create React App is as follows:<\/p>\n
\nnode_modules\/<\/code>: Contains all the packages used in the project.<\/li>\npublic\/<\/code>: Contains static files and the HTML template.<\/li>\nsrc\/<\/code>: Contains the application’s code, primarily JavaScript and CSS files.<\/li>\npackage.json<\/code>: Contains information about the project and manages dependencies and scripts.<\/li>\nREADME.md<\/code>: A documentation file about the project.<\/li>\n<\/ul>\n5. Setting Up the Development Environment<\/h2>\n5.1 Code Formatting and Linting<\/h3>\n
To maintain a consistent code style and improve code quality, we set up ESLint and Prettier. Install both packages with the following command in the terminal:<\/p>\n
npm install eslint prettier eslint-config-prettier eslint-plugin-prettier --save-dev<\/code><\/pre>\nThen, create .eslintrc.js<\/code> and .prettierrc<\/code> files in the root directory of the project to add configurations. The content of the .eslintrc.js<\/code> file is as follows:<\/p>\nmodule.exports = {\n env: {\n browser: true,\n es2021: true,\n },\n extends: [\n 'eslint:recommended',\n 'plugin:react\/recommended',\n 'prettier',\n ],\n parserOptions: {\n ecmaFeatures: {\n jsx: true,\n },\n ecmaVersion: 12,\n sourceType: 'module',\n },\n plugins: [\n 'react',\n 'prettier',\n ],\n rules: {\n 'prettier\/prettier': 'error',\n },\n};<\/code><\/pre>\nYou can add the following settings in the .prettierrc<\/code> file:<\/p>\n{\n \"semi\": true,\n \"singleQuote\": true\n}<\/code><\/pre>\n5.2 Installing VS Code Extensions<\/h3>\n
VS Code extensions are convenient development tools; we will install several useful extensions for React development. Recommended extensions include:<\/p>\n
\n- ESLint<\/li>\n
- Prettier – Code formatter<\/li>\n
- Simple React Snippet<\/li>\n
- Reactjs code snippets<\/li>\n<\/ul>\n
Extensions can be installed by clicking the Extensions<\/strong> icon in the left sidebar and entering the names in the search bar.<\/p>\n6. Basic Concepts of React<\/h2>\n
To understand React, you need to know a few foundational concepts:<\/p>\n
\n- Component<\/strong>: The fundamental building block of a React application. Components are defined as JavaScript functions and facilitate code reuse.<\/li>\n
- JSX<\/strong>: Stands for JavaScript XML, it uses a syntax similar to HTML to represent the UI.<\/li>\n
- State<\/strong>: Represents the data state of a component, causing re-rendering when data changes.<\/li>\n
- Props<\/strong>: Data passed from parent components to child components.<\/li>\n<\/ul>\n
7. Creating a React Component<\/h2>\n
Now let’s create a React component. Create a file named MyComponent.js<\/code> in the src\/<\/code> folder and enter the following code:<\/p>\nimport React from 'react';\n\nconst MyComponent = () => {\n return (\n \n
Hello, React!<\/h1>\n
This is my first React component.<\/p>\n <\/div>\n );\n};\n\nexport default MyComponent;<\/code><\/pre>\n
Now, let’s use this component in the src\/App.js<\/code> file. Update the code as follows:<\/p>\nimport React from 'react';\nimport MyComponent from '.\/MyComponent';\n\nfunction App() {\n return (\n \n
<\/MyComponent>\n <\/div>\n );\n}\n\nexport default App;<\/code><\/pre>\n8. Setting Up React Routing<\/h2>\n
To implement navigation between pages in a React application, we use the react-router-dom library. Install this package with the following command:<\/p>\n
npm install react-router-dom<\/code><\/pre>\nNow, you can set up routing. Modify the src\/App.js<\/code> file as follows:<\/p>\nimport React from 'react';\nimport { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\nimport MyComponent from '.\/MyComponent';\n\nfunction App() {\n return (\n \n \n <\/Route>\n <\/Route>\n <\/Switch>\n <\/Router>\n );\n}\n\nexport default App;<\/code><\/pre>\nIn the code above, AboutComponent<\/code> is a newly added component. You can create new components in the same way for routing.<\/p>\n9. Communicating with APIs<\/h2>\n
To communicate with external APIs in a React application, you can use libraries like axios. Install axios with the following command:<\/p>\n
npm install axios<\/code><\/pre>\nHere\u2019s a simple example of fetching data using axios. Modify src\/MyComponent.js<\/code> as follows:<\/p>\nimport React, { useState, useEffect } from 'react';\nimport axios from 'axios';\n\nconst MyComponent = () => {\n const [data, setData] = useState([]);\n\n useEffect(() => {\n const fetchData = async () => {\n const result = await axios('https:\/\/api.example.com\/data');\n setData(result.data);\n };\n\n fetchData();\n }, []);\n\n return (\n