Skip to main content

Day 3 - Develop your first React App!

Hi there, this is the third bootcamp's day and now you'll learn how to develop a basic react app with the next documentation.#

Feel free to ask any question you had about the day's before in the discord channel.

Starting with react 🚀#

The next instructions contains the neceseary steps to create a basic react app.

In your work folder open a new bash or command prompt and paste the next code.

npx create-react-app hello-cloudmex

And then you should be able to see the next message:

We suggest that you begin by typing:
  cd hello-cloudmex  yarn start
Happy hacking!

Congratulations you created your first react app. run the next commads to see your app

cd hello-cloudmexnpm run start

To see the official documentation go to React.org

Creating the navigation 🔧

In this tutorial we'll use React.Router .

Open the bash or the command prompt in the root folder and run the next command that will install a new dependendcy in your proyect.#

cd router-tutorialnpm install react-router-dom@6

This copies the appropriate React Router files and registers it in our package.json.

Now open the App.js file and add the import for react-router#

export default function App() { return (   <div>     <h1>Bookkeeper!</h1>   </div> );}

Next, we can see something like this in the index.js:#

mport { render } from "react-dom";import App from "./App";
const rootElement = document.getElementById("root");render(<App />, rootElement);

Now to continue yo need to follow the next guide:#

reactrouter.com

You will need to do this:#

  • Connect the URL
  • Add Some Links
  • Add Some Routes
  • Nested Routes

And now you’re finished! Now when you run npm run start

Setting up Tailwind with react 🔧

Tailwind CSS requires Node.js 12.13.0 or higher.

Open the bash or the command prompt in the root folder and run the next command that will install a new dependendcy in your proyect.

npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p

Configure your template paths#

Add the paths to all of your template files in your tailwind.config.js file.

module.exports = { content: [   "./src/**/*.{js,jsx,ts,tsx}", ], theme: {   extend: {}, }, plugins: [],}

Add the Tailwind directives to your CSS#

Add the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file.

@tailwind base;@tailwind components;@tailwind utilities;

Start using Tailwind in your project#

Start using Tailwind’s utility classes to style your content.

export default function App() { return (   <h1 className="text-3xl font-bold underline">     Hello world!   </h1> )}

You’re finished! Now when you run npm run start, Tailwind CSS will be ready

to see the official documentation go to tailwindcss.com

Save your proyect at github ✒️#

Add all your files 🔧#

In the root folder run the next command:

git add .

Add a commit 🔧#

git commit -m "{ write here a message}"

Make a push to the main branch 🔧#

git push origin maintain

A Step-by-Step Guide: Deploying on Netlify 🛠️#

In this tutorial, we will show you how easy it is to launch your site on Netlify. If you are not already a Netlify user, go ahead and sign up for free first.

click here to see the tutorial