What is React

React is a front-end javascript framework that makes it easy to build user interfaces. React code is written with JSX, a Javascript extension that allows you to easily define layouts using an HTML-like syntax. You can use JSX to define layouts and build reusable components, helping you develop an interactive UI much quicker than using HTML and Javascript alone.

Creating your project

Make sure you have a Jumpydoll account and have the Jumpydoll Github app installed on all repositories on your account.

To create your project:

• Log into Jumpydoll and go to the application create page (https://jumpydoll.com/applications/create).

• Type in React app as the project name

• Type in A sample React app in the project description and click Next

• Select the Javascript/React template

• Click "Create app"

After creating the app, you will be redirected to the project management page. On this page, you can see the code repository, build status, and application configuration. When you create a project, Jumpydoll creates a new GitHub repository in your account containing the initial React code. When you make a change to this GitHub repository, your code will automatically build and deploy to our servers. Let's try making a change now.

Making your first change

Before making the first change, let's view the initial version of the application. Click on the "Visit app" button. Here you can see the React webpage from the initial template.

For your first change, you'll be making a simple counter. Navigate to the manage page of your app. From here, you can click on the "Code" button, and click on "Code in the browser" to start writing code using GitHub's browser editor.

First, you'll write the counter component. Create a new file in the src directory (Right-click on "src" and click "New File"). Name the file "Counter.jsx". Paste the following content in the file: This file creates a component called Counter. The counter calls useState to create a variable count to store the state of the counter, and the setCount function to update the state. It then renders the value of the counter and a button to increment the counter. When you click the button, it calls the setCount function to increment the counter. Since the state has updated, React rerenders the component with the new value of count.

import React, { useState } from 'react';

export default function Counter(props) {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  )
}

To use this component in your app, open the App.js file and import the Counter component from your Counter file. Remove the <header> tag and its content, and replace it with <Counter />. Your App.js should look like this

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Counter from './Counter'

function App() {
  return (
    <div className="App">
      <Counter />
    </div>
  );
}

export default App;

Go to the "Version control" tab on the sidebar. Click the plus icons next to the App.js and Counter.jsx files. This stages the changes in these files to be committed in the next version. Add a commit message of "Add a counter" and press the checkmark to commit. This creates a new commit which is automatically pushed to GitHub to start building.

Back on the manage page of your app, you should see your new change start building. Once the build has finished, refresh and you should see the config version update in the "Deployment" section. Click the "Visit App" button to see your changes. You will now see your counter, which increments every time you press the button.

About the app

The initial code in the repository is created using Create React App, which simplifies the setup of creating a new React app. You can get a similar codebase by running npx create-react-app on your computer. However, Jumpydoll simplifies the creation of the code, as well as automatically creates a repository, hosts the content, and lets others discover your work.

React code is built into static content that your web browser can run. React doesn't run on the server, so you still need a server to accept incoming requests and respond with the React content. To serve the content, the project uses NGINX, just like you would use if you wanted to host the content on your own server. The project is initialized with a Dockerfile that builds the React content and runs NGINX to serve the content. If you need to make any customizations to this, you can edit nginx.conf file, or edit the Dockerfile directly.

Local setup

This guide uses the GitHub browser IDE to help you get started without any local setup. As you develop more complex applications, you'll want to be able to use your choice of IDE and test your code locally. To start developing locally, you'll need an IDE, git, and node.js.

VSCode is a popular multi-language IDE created by Microsoft and is great for developing React apps. It's what powers the GitHub browser-based IDE. You can download VSCode at https://code.visualstudio.com/.

You will use git to pull your code and push any changes you make. Git is an open-source version control system. It helps you track different versions of your work and makes it easy for multiple collaborators to merge their work. Many IDEs including VSCode have Git support built in, so you don't need to install anything extra. Follow your IDE's instructions for cloning a repository and creating/pushing commits. You can also install Git to your terminal or use GitHub Desktop if you prefer a standalone solution.

Lastly, you'll need to install Node.js. Node.js or Node is a Javascript runtime that runs outside of the browser. Node is generally used to develop backends, React uses it to generate the frontend content. You can view how to install Node at https://nodejs.dev/learn/how-to-install-nodejs. After you install Node, you can run npm start to run your application locally.

Next steps

• Learn more about how the counter works here: https://reactjs.org/docs/hooks-state.html

• Try a React tutorial: https://reactjs.org/tutorial/tutorial.html (starting from step 3)

• Learn more about Git: https://git-scm.com/docs/gittutorial