Home


**John Doe** is a Senior Art Director from [Stockholm](https://en.wikipedia.org/wiki/Stockholm), Sweden. After graduating from The College of Visual Arts with a degree in Communication Design, he worked for three small graphic design shops where he honed his design style and sensibility.

His work has been recognized by Communication Arts, Print, How, ID, IdN, AIGA, Effie, Archive, Graphis, AdFed and Rockport. Graphic Design USA named him a person to watch in 2019.

>The world always seems brighter when you’ve just made something that wasn’t there before. <cite>Neil Gaiman</cite>

As a hobby, John Doe authors the most influential design blog in Sweden with over 100,000 page views a month. He lives in Stockholm with his beautiful wife and two boys.

*Thank You for reading!*


This is a short page about me and my work

About Me

name

email

subject

message

consent

Get in Touch

React uses the javascript library to create efficient user interfaces of web applications in an effective way. It helps us to compose small pieces of code from complex UIs. It’ll update the right component when data changes and allow us to create fast and simple web applications.

First of all, you’ve to install “NodeJs”. If you don’t have “NodeJs” in your local machine then you should install it from [here](https://nodejs.org/en/download). You’ve to install the LTS Version of NodeJs according to the bit of your computer.

Now we are going to create react app…

> \*First command: “\**npx create-react-app first **-app**”*

![](/images/1-838f4c4b.png)

It will take some time to install.

If you’ve previously installed “***create-react-app***” globally via “***npm install -g create-react-app***”, we recommend you uninstall the package using “***npm uninstall -g create-react-app***” to ensure that npx always uses the latest version.

[*“**npx***](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b)*” is a package runner tool that comes with np*m 5.2+ and higher. It is easier to work with updated versions for being \*competitive with browser and vs code.

“***create-react-app***” is the command to build the react app.

“***first-app***” is the command we where we’ve to be careful. This will be our app name so we’ve to choose a meaningful name here. Here we’ve used the “***first-app***” name to create our react app. Every time we want to create a react app we’ve to choose a name that is something related to our work that can express our goal.

![](/images/2-8ad36a08.png)

Here we can see in the terminal window that npx is downloading the necessary data to run react app.

![](/images/3-59524b2e.png)

Here we can see react app installation complete message in the terminal window.

After installation, it will create a directory called “***first-app***” inside the current folder of your desired location.
Inside that directory, it will generate the initial project structure and install all the transitive dependencies.

Here we can see no configuration or complicated folder structures is there, just only the files you will need to build your app.
Now, you can open your directory as the installation is done.

![](/images/4-9eb15382.png)

Here *node_modules* is full with many folders made by react developers. There are many webpack and babel preconfigured and hidden here. So you don't have to focus on this folder. As a beginner, you just ignore the folder and don't touch it.

![](/images/5-6ed61514.png)

The public folder contains the *index.html* file and favicon for the website and other logos. If you want to change the favicon you’ve to replace the favicon here or

![](/images/6.png)

you can change the code in vs code to get a new favicon.

As a developer, all your focus will be in\* the src\* folder. In this folder, you will put

![](/images/7.png)

your app file is here. Here you can create a folder as your requirement, you can create a folder later you can import a file of the folder in the vs code.

![](/images/8-39a13188.png)

Here we are going to discuss *the **.gitignor*** file. The file that we don’t wanna share in public or push in Github, will store here.

![](/images/9.png)

In the package.json file, we can see that the dependencies file will store in here. Web apps may require other dependencies than we have to install them, other dependencies files will also store in here.

After the first command, we’ve familiar with react app directory. Now we are going to command our code to launch the app.

> *Second Command: “**cd first-app**”*

Here cd means change directory. We are going to change our directory to connect vs code to app file stored in the directory.

> *Third Command: “**npm start**”*

In this command, npm will launch the app. A new window will open in the browser. In vs code, we can see the successful compilation message.

![](/images/10.png)

In the browser, we can see port: <http://localhost:3000/> which is launching our app.

![](/images/11.png)
Congratulation you’ve created your first react app. Now explore...

If you wanna learn more about react, you can read the official documentation of react here https://reactjs.org/docs/create-a-new-react-app.html



React uses javascript library to create efficient user interfaces of web application in effective way. It helps us to compose small pieces of code from complex UIs. It’ll update the...

How to create react app


**This is a paragraph**. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line [indentation](https://en.wikipedia.org/wiki/Indentation_(typesetting)), but <abbr title="HyperText Markup Language">HTML</abbr> paragraphs can be any structural grouping of related content, such as images or form fields.

The HTML &lt;h1&gt;–&lt;h6&gt; elements represent six levels of section headings. &lt;h1&gt; is the highest section level and &lt;h6&gt; is the lowest.

# This is an H1

## This is an H2

### This is an H3

#### This is an H4

##### This is an H5

###### This is an H6

Avoid using heading tags to resize text. Instead, use the CSS font-size property. Headings use size to indicate their relative importance, but CSS is preferred for general-purpose resizing.

## Quoting

The HTML blockquote element defines a long block quotation in the HTML document from another source.

>“Creativity is allowing yourself to make mistakes. Design is knowing which ones to keep.” <cite>― Scott Adams</cite>

A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the &lt;cite&gt; element.

<hr />

## Unordered Lists

Groups a collection of items that do not have a numerical ordering, and their order in the list is meaningless.

+ Donec non tortor in arcu mollis feugiat
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit
+ Donec id eros eget quam aliquam gravida
+ Vivamus convallis urna id felis
+ Nulla porta tempus sapien

## Ordered Lists

Represents a list of items. The only difference from the unordered list is taht the order of the items is meaningful.

1. Donec non tortor in arcu mollis feugiat
2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit
3. Donec id eros eget quam aliquam gravida
4. Vivamus convallis urna id felis
5. Nulla porta tempus sapien

## Code Blocks

<pre>/* Some example CSS code */
body {
  color:red;
}
</pre>

## Video Embeds

<iframe width="640" height="360" src="https://www.youtube.com/embed/wEG7x7jRhNQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## Tables

<table>
  <caption>Simple table with caption and header</caption>
  <thead>
    <tr>
      <th>First name</th>
      <th>Last name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Doe</td>
    </tr>
  </tbody>
</table>


The style guide provides you with a blueprint of default post and page styles. The style guide is also a great reference for suggested typographic treatment and styles for your content.

Style Guide


Thank you for contacting me! I will get back in touch with you soon.

**Have a great day!**
