Introduction to Setting up a ReactJS project
In this blog post, we’ll guide you through the process of setting up a new React and NextJS project. We’ll cover the essential steps involved, including creating a project, installing dependencies, and running the development server. Please also check previous post where we explained about React Basics and NextJS Framework from the link below.
Prerequisites for setting up ReactJS Project
Before we begin, ensure you have the following tools installed for starting ReactJS project:
Git Version Control
A version control system used for tracking changes to your code. By default, it will create a master/main branch project to track changes to your code. It also helps you to keep track of changes during your development, you can restore any changes, discard changes and even test different versions without messing up the code. Also, you will be getting additional knowledge as most of the companies use Git for code management, and is an essential skill for your resume.
We are using Windows for our project, but you can also use Linux. Choose the download accordingly for all requirements we share next.
Node.js and NPM
Node.js is a JavaScript runtime environment that is used to run your code, do application build and compile scripts. It also provides some compiler dependencies we need for executing ReactJS code. You can download any of the LTS version available.
Along with NodeJS, we get NPM which is the package manager for Node.js. With NPM you can install dependencies to your project like Axios for making API calls, Chakra UI for UI components and theming, DatePicker for adding date inputs and much more.
Both are essential for working with React and Next.js projects. There is only single installation required for both NodeJS and NPM
You can check installation success with Commands below to test versions as well.
PS C:\Users\balvi> node -v
v20.9.0
PS C:\Users\balvi> npm -v
10.1.0
VS Code Editor
What can be better to learn JavaScript with a JavaScript based IDE built using electron. A popular code editor that provides excellent support for JavaScript development, including React and Next.js. You can get it from the Microsoft website and also enjoy various extensions available for the VS Code.
We mention VS Code as Editor because it needs extensions to work, so it is lightweight by Default. Eclipse or IntelliJ Idea on another side is a fully integrated Development environment but for heavy use. So, they are known as IDE and not editor.
Terminal/Powershell
For most of the tutorial we will be using the terminal. You can also use that or if you don’t have terminal in your windows, then you can use PowerShell as well. For Linux terminal will be available, so feel free to use that.
Creating a New React Project
Follow the below steps to start with a React based Application. You also have options to start with different templates such as Typescript Project, Typescript with Redux Project or just plain old JavaScript. We will use the default one for this. Irrespective of the templates, it will be same. Just a few differences how you define variables and its types with Typescript, whereas JavaScript doesn’t even care until you run and get an error. Thats why dev now a days prefer Typescript to be safe from unexpected errors with type safety. Example you can declare a variable as string if you expect text.
Note: Check Official ReactJS Docs for Custom Template Usage
1. Install Create React App (CRA)
Create React App (CRA) is a tool that simplifies the process of setting up a new ReactJS project. It provides a pre-configured environment with all the necessary dependencies and tools.
npm install -g create-react-app
2. Create a new project
npx create-react-app my-react-app
If you get any execution error for script related error, then execute below command in terminal/powershell for windows
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
Also, if you get any error related to ERR_SSL_CIPHER_OPERATION_FAILED, then execute below command in terminal.
npm cache clear –force
These are the errors we faced in windows, but on Linux there might be no issues. Still feel free to comment if you face any issues. We will help to solve it in comments as well or update the solution in article itself. Thanks.
3. Navigate to the project directory
With below command you can change to directory where you created project files. Use the same name as the previous step if you have named it differently.
cd my-react-app
4. Start the development server
Now that you have everything ready, you can start the application and can access development version locally in your browser. Just keep the command running in the Terminal/Powershell and don’t close unless you want to kill the dev server. Closing will also make the application down, and when you are done with, you can turn it down.
npm start
You can navigate to address http://localhost:3000 to check the project. If you see image same as above then congrats you finally created a ReactJs project. Let’s move to NextJS Project creation.
Creating a New Next.js Project
Next.js is a popular React framework that provides features like server-side rendering (SSR) and static site generation (SSG). It simplifies the process of building fullstack React applications. A few steps will be the same as above ReactJS project, so we will keep it short.
1. Install Next.js
You need to run following command to install dependency for creating a next project.
npm install -g next
2. Create a new project
Enter below command to start creating NextJS Project. Same way select a name for your project.
npx create-next-app my-next-app
For most of the questions, you can answer yes as they will add helpful configurations and integration for the project. You can select typescript for this or choose no if you just need to use javascript. But we recommend using typescript with NextJS as you can expect what you will get from the declarations and functions in NextJS.
With these selections it will install ReactJS dependencies, so yes, you can do use same features of React along with Functionalities provided by Next as a bonus. You also get option to use Tailwind CSS which is a modern CSS framework and gives you pretty nice design from the start without any effort.
As we have selected Typescript, we also get Types package, along with ESLint for linting issues such as spacing, formatting, clean up etc basic code cleanup tasks to make it beautiful and structured well. In short, does the cleaning up for you and keeps code in check for any standards we need.
PostCSS is just a CSS preprocessor for processing and optimizing Sass/CSS files.
3. Navigate to the project directory
Now enter below command to change the project directory and for running the code.
cd my-next-app
4. Start the development server
Enter the below command to run Next Project. You might have noticed that its different from the above React project because both have different structure accordingly as well tools, and scripts. So next project runs with different scripts and need a different command.
npm run dev
Open the address http://localhost:3000 to open the application in your browser. If you see the below output then congrats, you have successfully generated the NextJS project.
Project Structure of ReactJS and NextJS
Both React and Next.js projects follow a similar structure:
src: Contains the source code for your application. Most of the code related to pages, components go here as its the root and we use it for importing files relatively as well modules/packages.
public: Contains static assets like images and favicons. Also the Stylesheets for CSS.package.json: Describes your project’s dependencies and scripts. You can configure the project name, license, author info, git repo link as well the scripts you might need other than the default.
node_modules: Stores the installed dependencies. Its a big folder containing all your installed dependencies. It exists only while deployment and in production, we don’t use that. You also need to make sure to ignore node modules folder with git ignore.
There might be other config files for the custom dependencies you install later like postcss or ESLint config. You can edit these files to change the config as per need of the project. It can be customized anytime but recommended to set at the start to avoid any additional work later.
Installing Dependencies
You may need to install additional dependencies based on your project requirements. For example, to install a state management library like Redux, you can use:
cd my-react-app
npm install redux react-redux
Same way you can install any additional library you need from NPM repository by replacing dependency name like axios,react-redux, moment etc.
If there are dependency conflicts for peer dependency, you can force dependency.
npm install axios –legacy-peer-deps
This will ignore version mismatch issue and let you install a package. You can also mention a version like this:
npm install axios@4
npm install axios@4.2.1
The first version of the command will install the latest version under 4 or the version specified, and the other command will do the subversions under main version 4.
You can check and find dependencies on the NPM official site.
Browse NPM Packages on NPM Repo
In programming, especially in projects, we do use following syntax like 1.0.0 where the first denotes the major change when we have something different from the existing functionality. Second denotes a small change to the existing functionality and the third one shows a minor change or usually the fix to the issues.
So, 1.0.0 is usually the starting version, whereas 2.3.4 can denote, it’s a 2nd major version of the software with minor additions as well fixes to some features. This type of versioning helps dev to avoid issues with incompatible dependencies, as well avoiding missing functionality in updated dependency versions.
Running the Development Server
Once you’ve created your project and installed dependencies, you can start the development server to view your application. The development server provides features like hot module replacement, which allows you to see changes to your code reflected in the browser without having to refresh the page.
Hot Module replacement is a process with which you dont need to close and run project again, as the code changes are detected automatically and the new code is available. Sometimes we have the browser sync as well, that refreshes the browser as well. But you can also manually refresh to update the page, once you make changes, without closing the running command.
Additional Tips to Explore on your own
Use a code editor or IDE: A good code editor or integrated development environment (IDE) can greatly enhance your development experience. Popular choices include Visual Studio Code, WebStorm, and Sublime Text.
Utilize version control: Use a version control system like Git to track changes to your code and collaborate with others.
-Explore the documentation: Both React and Next.js have extensive documentation that can be a valuable resource for learning more about their features and best practices.
Consider using a linter: A linter can help you catch potential errors and enforce coding standards in your project. Popular linters for JavaScript include ESLint and Prettier.
Set up a task runner: A task runner like Webpack or Parcel can automate common development tasks, such as bundling your code and optimizing assets.
Install a CSS preprocessor: A CSS preprocessor like Sass or Less can improve your CSS workflow by adding features like variables, nesting, and mixins.
By following these steps and incorporating the additional tips, you’ll be well on your way to setting up a solid foundation for your React and Next.js project.
Summary
In this blog post, we’ve covered the basic steps involved in setting up a React and Next.js project. By following these steps, you’ll have a solid foundation to start building your web application. In the next post, we’ll delve deeper into understanding components and JSX. We will keep posting more articles in this series, so stay connected. Thanks for reading.
Originally published at https://tekraze.com/setting-up-reactjs-nextjs-project/
Top comments (0)